<template>
    <div class="about">
        <h1>This is an about {{msg}}</h1>
        <h1>点击数量 {{$store.state.num}}</h1>
        <input :value="num2"><!-- 如果使用v-model 没双向绑定设置 set 会警告-->

        <p>mapGetter: <strong style="color: #42b983"> {{getMsg}}</strong></p>
        <div>
            <p>更新列表
                <button @click="setList">更新</button>
            </p>
            <div>
                <p v-for="(item,index) in listData" :key="index">
                    {{item.title}}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {mapState, mapGetters,mapActions} from 'vuex'

    export default {
        computed: {
            //原始方法，比较累赘
            msg() {
                return this.$store.state.num
            },
            //num: {
            //     get() {
            //         return this.$store.state.num
            //     }, set(val) {
            //         this.$store.commit("setNum", val)
            //     }
            // }

            //其中一种方法，简单
            //...mapState(['num'])
            ...mapState(['listData']),
            //需要改变值得时候，自定义值
            ...mapState({
                num2: (state) => {
                    return state.num + 10
                }
            }),
            ...mapGetters(['getMsg'])
        },
        data() {
            return {
                nnn: "sqa"
            }
        },
        async mounted() {
            console.log(this.$route)
            let aa = await axios.get("http://api-data.vjes.com/getCode")
            console.log(aa.data)
        },
        methods: {
            ...mapActions(['setList'])
            //使用解构后的action可以直接调用了
            // setList() {
            //     this.$store.dispatch('setList')
            // }
        }
    }

</script>
